import notFoundImg from '@/assets/images/nocourse.png'
import Image from 'next/image'
import React, { FC } from 'react'
import header1 from '@/assets/images/header1.png'
import header2 from '@/assets/images/header2.png'
import { AiSample } from '@/types'
import { useStores } from '@/store'
import { useRouter } from 'next/router'

const empty: FC<{ info: AiSample }> = (props) => {
  const store = useStores()
  const router = useRouter()
  return (
    <div className=" w-r16.5 h-r14.7 rounded-lg inline-block m-r0.8">
      <div className=' flex flex-row'>
        <img alt="" src={props.info.preview} className=" w-auto  h-r7.5 flex-1 " />
        {/* <Image alt="" src={header1} className=" w-r7.5  h-r7.5 flex-1 " />
      <Image alt="" src={header2} className="w-r7.5  h-r7.5 flex-1 " /> */}
      </div>

      <div className=' relative'>
        <span className=' block font-hansans font-bold text-r1.4 pl-r1.0'>
          {props.info.title}
        </span>
        <span
          onClick={() => { store.active.initImageParam(props.info); router.push({ pathname: '/create', query: { ...router.query } }) }}
          className='relative z-100  block w-r15.0 h-r2.5 leading-r2.5 rounded-3xl  text-white bg-gradient-to-r from-FF4747 to-FF7070   text-center left-1/2 -translate-x-1/2 cursor-pointer'> AI做同款</span>
      </div>

    </div>
  )
}


export default empty

